import React, { Component } from 'react';
import './card.css';

class Card extends Component {


    getTypeName(){

        switch(this.props.type){
            case 1:
                return '听力题';
            break;

            case 2:
                return '选词填空';
            break;


            case 3:
                return '匹配题';
            break;


            case 4:
                return '阅读理解';
            break;

            case 4:
                return '翻译';
            break;
            
        }

    }

    showAnswer(e){
        let node = e.target;
       
        let trueAnswer = node.dataset.true;
        let yourAnswer = node.dataset.you;
        
        if(trueAnswer === ''){
            return;
        }

        trueAnswer = trueAnswer.replace(/<span class='query_words'>/g, '');
        trueAnswer = trueAnswer.replace(/<\/span>/g, '');
        yourAnswer = yourAnswer.replace(/<span class='query_words'>/g, '');
        yourAnswer = yourAnswer.replace(/<\/span>/g, '');

        if(yourAnswer == ''){
            yourAnswer = '未选择';
        }


        trueAnswer = '正确答案: '+ trueAnswer;
        yourAnswer = '你的答案: '+ yourAnswer;


        this.props.show(e, trueAnswer, yourAnswer);

    }




    
    render() {

        let type = this.getTypeName();
        let data = this.props.result.data.result;


        return (
            <div className='result-box'>
                    <div className='type'>
                        {type}
                    </div>


                    {
                        data.map((value, index)=>{
                            return(
                                <div key={index} className='row'>
                                    {
                                        value.map((value2, index)=>{
                                            let style = "result ";

                                            switch(value2[2]){
                                                case 0:
                                                    style+='green-bg';
                                                    break;
                                                case 1:
                                                    style+='red-bg';
                                                    break;
                                                case 2:
                                                    style+='yellow-bg';
                                                    break;
                                                case 3:
                                                    style+='display-none'
                                                    break;
                                            }

                                            return(
                                                <span onClick={(e)=>{this.showAnswer(e)}} data-true={value2[0]} data-you={value2[1]} key={index} className={style}>{value2[3]}</span>
                                            )
                                        })
                                    }
                                </div>
                            )
                        })
                    }



                </div>
        );
    }
}

export default Card;